<template>
	<scroll-view class="main">
		<!-- 预约弹窗 -->
		<view class="maskClass" v-show="showMask" >
			<view v-show="showMask" style="width:70%; background-color: #fff;padding: 25px;border-radius: 15rpx; margin: 65rpx auto;z-index:1;">
				<view style="text-align: center;">
					<text style="padding: 35rpx; font-size:35rpx; font-weight:700; text-align:center" >	请选择</text>
				</view>
				<view class="devideline"></view>
				<view class="login_from_input">
					<view class="form-left">服务时间</view>
					<view class="login_from_fun">
						<picker style="width: 100%;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view style="font-size: 25rpx; float:left;">{{ date || '请选择服务时间' }}</view>
						</picker>
					</view>
				</view>
				<view class="login_from_input">
					<view class="form-left">
						<text>服务内容</text>
					</view>
					<view class="login_from_fun" style="height: 200rpx;"><input v-model="orderInfo.details" placeholder="请输入服务内容"></view>
				</view>
				<view class="login_from_input">
					<view class="form-left">联系电话</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="orderInfo.userTelphone" placeholder="请输入联系电话"></view>
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="submitOrder()">提交</button>
					<button type="warn" class="canncle" @click="closePopup()">取消</button>
				</view>
			</view>
		</view>
		<view>
			<view style="width: 93%;height:530rpx;margin: 0 auto;background-color: #fff;border-radius: 15rpx;">
				<text class="title" style="padding: 15rpx;">{{machineDetail.mInstruCHNName}}</text>
				<view style="width: 40%;float: left;margin-left: 30rpx;margin-top: 30rpx;">
					<image style="height: 334rpx;width: 323rpx;border: 1px #016fb8 solid;;" :src="machineDetail.image" ></image>
				</view>
				<view class="top" style="width: 45%;float: right;">
					<view>
						<text class="creator">产地：{{machineDetail.city?machineDetail.city:'暂无'}}</text>
					</view>
					<view>
						<text class="creator">型号：{{machineDetail.mInstruModel?machineDetail.mInstruModel:'暂无'}}</text>
					</view>
					<view>
						<text class="creator">联系人：{{machineDetail.mInstruContactPerson?machineDetail.mInstruContactPerson:'暂无'}}</text>
					</view>
					<view>
						<text class="creator">累计服务次数：{{machineDetail.totalServiceTime?machineDetail.totalServiceTime:'暂无'}}次</text>
					</view>
					<view>
						<text class="creator">累计服务时长：{{machineDetail.totalServiceTime?machineDetail.totalServiceTime:'暂无'}}小时</text>
					</view>
					<view>
						<text class="creator">启用日期：{{machineDetail.serviceDate?machineDetail.serviceDate:'暂无'}}</text>
					</view>
					<view>
						<text v-if="machineDetail.mInstruPriceRmb" class="price">服务价格：{{machineDetail.mInstruPriceRmb}}元</text>
						<text v-else class="price">服务价格：暂无</text>
					</view>
					<!-- <uni-tag text="立即下单" type="primary" style="margin-right: 15rpx; 
					width: 80px;text-align: center; float:right" @click="dial()"></uni-tag> -->
					
				</view>
			</view>
			<!-- <view class="type">
				<text class="publishTime">{{machineDetail.mInstruOrganization}}</text>
			</view> -->
			<view class="content">
				<text class="title">仪器设备基本信息</text>
				<!-- <button class="btn_order" v-if = "orderStatus != '0'"  type="primary" size="mini" @click="toggle('center')">立即下单</button> -->
				<view>
					<text class="creator">仪器名称：【{{machineDetail.mInstruCHNName?machineDetail.mInstruCHNName:'暂无'}}】</text>
				</view>
				<view>
					<text class="creator">英文名称：【{{machineDetail.mInstruENGNam?machineDetail.mInstruENGNam:'暂无'}}】</text>
				</view>
				<view>
					<text class="creator">启用日期：【{{machineDetail.serviceDate?machineDetail.serviceDate:'暂无'}}】</text>
				</view>
				<view>
					<text class="creator">产地：【{{machineDetail.city?machineDetail.city:'暂无'}}】</text>
				</view>
				<view>
					<text class="creator">所属单位：【{{machineDetail.mInstruOrganization?machineDetail.mInstruOrganization:'暂无'}}】</text>
				</view>
				<view>
					<text class="creator">仪器生产厂商：【{{machineDetail.mInstruManufacturer?machineDetail.mInstruManufacturer:'暂无'}}】</text>
				</view>
				<view>
					<text class="creator">领域：【{{machineDetail.filed?machineDetail.filed:'暂无'}}领域】</text>
				</view>
				<view>
					<text class="creator">主要技术指标：{{machineDetail.mInstruPurpose?machineDetail.mInstruPurpose:'暂无'}}</text>
				</view>
				<view>
					<text class="creator">主要功能：{{machineDetail.serviceConent?machineDetail.serviceConent:'暂无'}}</text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	
	function getDate(type) {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day}`;
	}
	
	import env from '../../../utils/env';
	import * as order from '@/api/personCenter/ORDER.js'
	import * as data from "@/api/system/dict/data" 
	import * as machine from "@/api/personCenter/YQGXFWXXB.js";
	import * as getDetail from "@/api/personCenter/YQJBXXB.js"
	import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
	// import uniTransition from "@/components/uni-transition/components/uni-transition/uni-transition.vue"
    export default {
		components: {
			uniPopup,
		},
		data() {
			return {
				machineDetail: {},
				categaryLisy:[],
				// showPopup:false,
				popupType: 'top',
				orderStatus:'0',
				//截止时间选择相关
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				phone:'',
				detail:'',
				orderInfo:{
						details: '',//订单详情描述
						orderType: '',//订单类型
						serverId: '',//服务ID
						serverName: '',//服务名称
						subscribeDate: '',//预约时间
						userId: '',//下单人ID
						userName: '',//下单人名字
						userTelphone:''//下单人电话
				},
				showMask: false,
			}
		},
		onLoad(option) {
			// this.getCategaty()
			this.orderInfo.subscribeDate = this.date
			this.orderStatus = option.orderType
			this.orderInfo.orderType =  option.orderType
			this.getMachineDetail(option.id);
			this.getUser()
		},
		methods:{
			getUser(){
				const value = uni.getStorageSync('userInfo')
				console.log(value);
				this.orderInfo.userName = value?.login_user?.member?.username
				this.orderInfo.userId = value?.login_user?.member?.id
			},
			getMachineDetail(id){
				getDetail.getYQJBXXB(id).then((res)=>{
					this.machineDetail = res.data;
					let url = this.machineDetail.image?.split(',')[0];
					if (url) {
						this.machineDetail.image = url.includes('http://') ? url : `${env.imgUrl}` + url;
					}
					// this.machineDetail.image = `${env.imgUrl}` + this.machineDetail.image
				});
			},
			// dial(){
			// 	this.showPopup = true
			// },
			toggle(popupType) {
				console.log("弹窗")
			    this.popupType = popupType;
			    // this.$refs['orderpopup'].open();
				this.showMask = true
			},
			closePopup() {
				// this.$refs['orderpopup'].close();
				this.showMask = false
			},
			change(e) {
			},
			bindDateChange(e) {
				this.date = e.detail.value;
			},
			submitOrder(){
				if(this.orderInfo.userTelphone == ''){
					uni.showToast({
						icon:"none",
						title:"联系电话不能为空！"
					})
				}else{
					// this.orderInfo.subscribeDate = this.date
					// this.orderInfo.serverId = this.machineDetail.id
					// this.orderInfo.serverName = this.machineDetail.mInstruCHNName
					// order.addORDER(this.orderInfo).then((res)=>{
					// 	if(res.code == '200'){
					// 		uni.navigateTo({
					// 			url:'/subpages/pages/my/orderList/order_list'
					// 		})
					// 	}else{
					// 		uni.showToast({
					// 			icon:'none',
					// 			title:'提交失败，请稍后重试！'
					// 		})
					// 	}
					// })
				}
			}
		}
	}
	
</script>

<style>
	
	.main {
		width: 100vw;
		height: 100vh;
		background-color: #e0e0e0;
		padding-top: 25rpx;
	}
	
	image {
		width: 100%;
	}
	
	.top{
		height: 140rpx;
		margin-top: 15rpx;
		padding-top: 25rpx;
		margin-right: 15rpx;
		background-color: #fff;
	}
	
	.type{
		height:80rpx;
		background-color: #fff;
		float: left;
		margin-top: 15rpx;
		padding-top: 15rpx;
	}
	
	.content{
		width: 87%;
		min-height:620rpx;
		background-color: #fff;
		margin: 25rpx auto;
		border-radius: 15rpx;
		padding: 25rpx;
	}
	
	.title {
		font-size: 35rpx;
		font-weight: 700;
		width: 100%;
		padding-top:15rpx;
		padding-left: 8rpx;
		color:#306caa;
		float: left;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2; /** 显示的行数 **/
	}
	
	.creator {
		width: 100%;
		font-size: 25rpx;
		padding: 8rpx;
	}
	
	.publishTime {
		font-size: 25rpx;
		padding: 8rpx;
		float: right;
	}
	
	.detail_content {
		margin-top: 8rpx;
/* 		text-indent: 2em; */
		line-height: 50rpx;
		justify-content: flex-start;
		padding: 25rpx;
	}
	
	.form-left{
		margin-left: 16px;
		padding:5rpx 0;
	}
	
	.form-right{
		margin-top: 6px;
		margin-left: 6px;
		padding:5px 0;
		width: 90%;
		border: 1px solid #D8D8D8;
		border-radius: 3px;
	}
	
	.uni-form-item {
		margin: 60rpx 30rpx;
		border-radius: 50px;
		}
		
	.submit_view {
		height: 90rpx;
	}
		
	.submit_view .submit{
		background-color: #016fb8;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: left;
	}
	.submit_view .canncle{
		background-color: darkgray;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: right;
	}
	
	.login_from_input{
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 20upx 0px; 
		margin: 0px auto; 
		background-color: #fff;
	} 
	
	.login_from_name{
		width: 40%; 
		margin-left: 40rpx;
		font-size: 30rpx;
	}
	.login_from_fun{ 
		width: 60%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		text-align: right; 
		margin-left: 25rpx;
	}
	
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	
	/deep/ .uni-popup .uni-popup__wrapper {
	    width: 70% !important;
		margin: 0 auto;
	}
	
	.price {
		width: 100%;
		background-color: #c6e2ff;
		font-size: 25rpx;
		color:#ff4444;
		padding: 8rpx;
		border-radius: 8rpx;
	}
	
	.devideline {
		float: left;
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.btn_order{
		position: fixed;
		top: 550rpx;
		right: 30rpx;
		margin-right: 15rpx; 
		width: 100px;
		text-align: center; 
		float: right;
	}
	
	.maskClass {
		position:fixed;
		bottom:0;
		top:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.5);
		z-index: 2;
	}	
</style>